<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>文件管理</title>

    <link rel="stylesheet" type="text/css" th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
    <!-- bootstrap 5.x and 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
    <!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
        wish to resize images before upload. This must be loaded before fileinput.min.js -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/js/plugins/piexif.min.js" type="text/javascript"></script>
    <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
        This must be loaded before fileinput.min.js -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/js/plugins/sortable.min.js" type="text/javascript"></script>
    <!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js
       3.3.x versions without popper.min.js. -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
        dialog. Bootstrap 5.x and 4.x is supported. You can also use the 3.3.x versions. -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- the main fileinput plugin file -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/js/fileinput.min.js"></script>
    <!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/themes/fa/theme.js"></script>
    <!-- optionally if you need translation for your language then include  locale file as mentioned below (replace LANG.js with your locale file) -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/js/locales/LANG.js"></script>


    <!--    jquery.toast 提示框组件-->
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/toast/jquery.toast.css}">


</head>
<body>
<div class="col-md-12">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" href="#allAttachment" role="tab" data-toggle="tab">所有附件</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#uploadAttachment" role="tab" data-toggle="tab">上传附件</a>
            </li>
        </ul>
    </div>
    <div class="tab-content">
        <!--            所有附件-->
        <div role="tabpanel" class="tab-pane active" id="allAttachment">

            <div class="row">
                <input type="hidden" id="showId" >

                <th:block th:each="file : ${info.list}">
<!--                    <a href="#" class="viewActivity" onclick="viewActivity('${activity.title}','${activity.beginTime?string("yyyy-MM-dd HH:mm")}')">-->
                    <div class="col-lg-2 col-md-3 col-sm-6 col-6 div-thumbnail"   th:onclick="choice( [[${file.picturePath}]],[[${file.pictureName}]] );"  >
                        <input type="hidden" id="filePath" th:value="${file.picturePath}">
                        <input type="hidden" id="fileName" th:value="${file.pictureName}">
                        <a href="#">
                            <img class="img-thumbnail img-fluid img-responsive" th:src="${file.pictureSmallPath}">
                        </a>
                    </div>
                </th:block>
            </div>
            <div th:replace="admin/public/module :: pageAdminNav(${info})"></div>
        </div>
        <!--            上传附件-->
        <div role="tabpanel" class="tab-pane" id="uploadAttachment">
            <div class="tile">
                <div class="file-loading">
                    <!--                        这里的input是一个封装的组件，用于上传文件-->
                    <input id="input-fas" autocomplete="off" name="file" type="file" class="file-loading" multiple>
                </div>
            </div>
        </div>
        <input type="hidden" th:value="${uploadType}" name="uploadType" id="uploadType">
        <span sec:authentication="name" style="display: none" id="userName"></span>
    </div>
</div>

<!--    选择中文-->
<script th:src="@{/plugins/bootstrap-fileinput/js/locales/zh.js}"></script>

<!--    jquery.toast 提示框组件-->
<script th:src="@{/plugins/toast/jquery.toast.js}"></script>
<script type="text/javascript">
    var uploadType = $("#uploadType").val()
    var userName = $("#userName").text()
    if (uploadType=='uploadUser'){
        // alert("uploadUser")
        $("#input-fas").fileinput(
            {
                theme : "fa",
                uploadUrl : "/uploadUserImg/"+userName,
                language : 'zh',
                uploadAsync : true,
                maxFileCount : 10,
                allowedFileExtensions : [ 'jpg', 'gif', 'png', 'jpeg',
                    'svg', 'psd' ],
                enctype : 'multipart/form-data',
                showClose : false,
                dropZoneEnabled: true,//是否显示拖拽区域

            }).on("filebatchuploadcomplete", function(event, files, extra) {
            $.toast({  // 依赖于 jquery.toast 提示框组件
                text : "上传成功！",
                heading : '提示',
                icon : 'success',
                showHideTransition : 'fade',
                allowToastClose : true,
                hideAfter : 1000,
                stack : 1,
                position : 'top-center',
                textAlign : 'left',
                loader : true,
                loaderBg : '#ffffff',
                afterHidden : function() {
                    window.location.reload();
                }
            });
        });
    }else {
        // alert("管理员")
        $("#input-fas").fileinput(
            {
                theme : "fa",
                uploadUrl : "/uploadFile",
                language : 'zh',
                uploadAsync : true,
                maxFileCount : 10,
                allowedFileExtensions : [ 'jpg', 'gif', 'png', 'jpeg',
                    'svg', 'psd' ],
                enctype : 'multipart/form-data',
                showClose : false,
                dropZoneEnabled: true,//是否显示拖拽区域

            }).on("filebatchuploadcomplete", function(event, files, extra) {
            $.toast({  // 依赖于 jquery.toast 提示框组件
                text : "上传成功！",
                heading : '提示',
                icon : 'success',
                showHideTransition : 'fade',
                allowToastClose : true,
                hideAfter : 1000,
                stack : 1,
                position : 'top-center',
                textAlign : 'left',
                loader : true,
                loaderBg : '#ffffff',
                afterHidden : function() {
                    window.location.reload();
                }
            });
        });

    }

    function choice(filePath,fileName) {
        // var id = $("#showId").val();
        // alert(filePath)
        // alert(fileName)
        $("#" + 'fileName' + "", window.parent.document).attr("value", fileName);
        $("#" + 'articleThumbnail' + "", window.parent.document).attr("value", filePath);
        $("#" + 'userImg' + "", window.parent.document).attr("src", filePath);
        parent.layer.closeAll();
    }
</script>
</body>
</html>